<template>
  <el-card class="m-2 p-3">
    <div slot="header" class="flex items-center justify-between">
      <section>
        <el-radio-group class="mr-4" v-model="type">
          <el-radio-button border :label="1">按小时</el-radio-button>
          <el-radio-button border :label="2">按天</el-radio-button>
        </el-radio-group>

        <el-date-picker
          v-model="datePickerList"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
          @change="initData"/>
      </section>

      <section>
        <el-button type="primary" @click="deBounceWrap(toExcel)">导出</el-button>
      </section>
    </div>

    <el-table stripe border :data="tableData" v-loading="loading">
      <el-table-column prop="start_time" label="开始时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.start_time |formatTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="抢糖果(金币)" align="center">
        <el-table-column label="投入" prop="candy.add" align="center"/>
        <el-table-column label="产出" prop="candy.sum" align="center"/>
        <el-table-column label="盈亏" prop="candy.gain" align="center">
          <template slot-scope="{row}">
            <el-tag :type="row.candy.gain | getType">{{ row.candy.gain }}</el-tag>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="盲盒礼物(金币)" align="center">
        <el-table-column label="投入" prop="gift.add" align="center"/>
        <el-table-column label="产出" prop="gift.sum" align="center"/>
        <el-table-column label="盈亏" prop="gift.gain" align="center">
          <template slot-scope="{row}">
            <el-tag :type="row.gift.gain | getType">{{ row.gift.gain }}</el-tag>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="霍克游戏(蓝钻)" align="center">
        <el-table-column label="投入(蓝钻)" prop="hu.add" align="center"/>
        <el-table-column label="产出(绑钻)" prop="hu.sum" align="center"/>
        <el-table-column label="盈亏" prop="hu.gain" align="center">
          <template slot-scope="{row}">
            <el-tag :type="row.hu.gain | getType">{{ row.hu.gain }}</el-tag>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="许愿树(金币)" align="center">
        <el-table-column label="投入" prop="tree.add" align="center"/>
        <el-table-column label="产出" prop="tree.sum" align="center"/>
        <el-table-column label="盈亏" prop="tree.gain" align="center">
          <template slot-scope="{row}">
            <el-tag :type="row.tree.gain | getType">{{ row.tree.gain }}</el-tag>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <el-pagination
      class="text-right mt-4"
      background
      layout="total, prev, pager, next"
      :total="meta.total"
      :page-size="20"
      @current-change="handleCurrentPageChange">
    </el-pagination>
  </el-card>
</template>

<script>
import {
  statisticKeepGame,
  statisticKeepGameExcel
} from '@/api/dataPanel/financial'

import {parseTime} from "@/utils";

export default {
  data() {
    return {
      loading: false,
      tableData: [],

      datePickerList: [],
      // 1按小时统计 2 按天统计
      type: 1,
      meta: {
        currentPage: 1,
        total: 0
      },
    }
  },
  filters: {
    formatTime(value) {
      return parseTime(value)
    },
    getType(value) {
      let tempValue = parseInt(value)
      if (tempValue > 0) return 'success'
      if (tempValue === 0) return 'info'
      if (tempValue < 0) return 'danger'
    }
  },
  computed: {
    start_time() {
      let [start_time] = this.datePickerList || []
      if (start_time) start_time = new Date(start_time).valueOf() / 1e3
      return start_time
    },
    end_time() {
      let [_, end_time] = this.datePickerList || []
      if (end_time) end_time = new Date(end_time).valueOf() / 1e3
      return end_time
    }
  },
  watch: {
    type: {
      handler: "initData"
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      this.loading = true

      statisticKeepGame(
        this.meta.currentPage,
        this.type,
        this.start_time,
        this.end_time
      ).then(res => {
        try {
          const {data: {list, current_page, last_page, total}} = res

          this.tableData = list
          this.meta.currentPage = current_page
          this.meta.total = total
        } catch (e) {

        }
      }).finally(() => this.loading = false)
    },
    handleCurrentPageChange(page) {
      this.meta.currentPage = page
      this.initData()
    },
    toExcel() {
      statisticKeepGameExcel(this.type, this.start_time, this.end_time)
        .then(res => {
          const {data: {download_url}} = res
          window.open(download_url)
        })
    }
  }
}
</script>
